<template>
  <view class="order-detail">
    <!-- 顶部导航栏 -->
    <!-- <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <icon type="back" size="20"></icon>
      </view>
      <view class="nav-title">订单详情</view>
    </view> -->

    <!-- 订单状态区域 -->
    <view class="status-section" :class="'status-bg-' + getStatusClass()">
      <view class="status-content">
        <view class="status-icon">
          <uni-icons :type="getStatusIcon()" color="#FFFFFF" size="50"></uni-icons>
        </view>
        <view class="status-info">
          <view class="status-title">{{ order.state_text }}</view>
        </view>
      </view>
    </view>

    <!-- 物流信息 -->
    <!-- <view
      v-if="order.status === '已发货' || order.status === '已完成'"
      class="logistics-section"
      @click="viewLogistics"
    >
      <view class="section-content">
        <view class="logistics-icon">
          <image src="/static/images/logistics.png" class="icon-image"></image>
        </view>
        <view class="logistics-info">
          <view class="logistics-status">{{ logisticsInfo.status }}</view>
          <view class="logistics-time">{{ logisticsInfo.updateTime }}</view>
        </view>
        <view class="right-arrow">
          <icon type="arrowright" size="16" color="#978868"></icon>
        </view>
      </view>
    </view> -->

    <!-- 收货信息 -->
    <view class="delivery-section">
      <view class="section-header">
        <view class="section-title">收货信息</view>
        <!-- <view
          v-if="order.status === '待审核'"
          class="edit-btn"
          @click="editAddress"
        >
          <text>修改</text>
        </view> -->
      </view>
      <view class="section-content">
        <view class="address-info">
          <view class="contact-info">
            <text class="recipient-name">{{ order.address?.name }}</text>
            <text class="recipient-phone">{{ order.address?.phone }}</text>
          </view>
          <view class="address-detail">{{
            order.address?.region.province +
            order.address?.region.city +
            order.address?.region.region +
            order.address?.detail
          }}</view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-header">
        <view class="section-title">订单信息</view>
        <view class="copy-btn" @click="copyOrderNo">
          <text>复制</text>
        </view>
      </view>
      <view class="section-content">
        <view class="info-item">
          <text class="info-label">订单编号</text>
          <text class="info-value">{{ order.order_no }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ order.create_time }}</text>
        </view>
        <view v-if="order.pay_time" class="info-item">
          <text class="info-label">支付时间</text>
          <text class="info-value">{{ order.pay_time }}</text>
        </view>
        <view v-if="order.delivery_time" class="info-item">
          <text class="info-label">发货时间</text>
          <text class="info-value">{{ order.delivery_time }}</text>
        </view>
        <view v-if="order.express_company" class="info-item">
          <text class="info-label">物流公司</text>
          <text class="info-value">{{ order.express_company }}</text>
        </view>
        <view v-if="order.express_no" class="info-item">
          <text class="info-label">物流单号</text>
          <text class="info-value">{{ order.express_no }}</text>
        </view>
        <view v-if="order.receipt_time" class="info-item">
          <text class="info-label">完成时间</text>
          <text class="info-value">{{ formatTime(order.receipt_time) }}</text>
        </view>
        <view v-if="order.cancel_remark" class="info-item">
          <text class="info-label">取消原因</text>
          <text class="info-value">{{ order.cancel_remark }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">支付方式</text>
          <text class="info-value">{{ order.pay_type?.text }}</text>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="products-section">
      <view class="section-header">
        <view class="section-title">商品信息</view>
      </view>
      <view class="section-content">
        <view
          v-for="product in order.product"
          :key="product.order_product_id"
          class="product-item"
          @click="viewProduct(product.product_id)"
        >
          <image :src="product.image.file_path" class="product-image"></image>
          <view class="product-info">
            <view class="product-name">{{ product.product_name }}</view>
            <view class="product-spec">{{ product.product_attr }}</view>
            <view class="product-price-qty">
              <text class="product-price" v-if="order.order_source==10"
                >¥{{
                  product.grade_product_price || product.product_price
                }}</text
              >
			  <text class="product-price" v-else-if="order.order_source==20"
			    >功德分：{{
			      product.points_num
			    }}</text
			  >
              <text class="product-qty">x{{ product.total_num }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 金额明细 -->
    <view class="amount-section">
      <view class="section-header">
        <view class="section-title">金额明细</view>
      </view>
      <view class="section-content">
        <view class="amount-item">
          <text class="amount-label">商品总额</text>
          <text class="amount-value">¥{{ getSubtotal() }}</text>
        </view>
        <!-- <view class="amount-item">
          <text class="amount-label">运费</text>
          <text class="amount-value">¥{{ order.shippingFee.toFixed(2) }}</text>
        </view>
        <view v-if="order.discount > 0" class="amount-item">
          <text class="amount-label">优惠</text>
          <text class="amount-value discount"
            >-¥{{ order.discount.toFixed(2) }}</text
          >
        </view> -->
		<view v-if="order.points_num > 0" class="amount-item">
		  <text class="amount-label">功德分</text>
		  <text class="amount-value discount"
		    >{{ order.points_num }}</text
		  >
		</view>
        <view class="amount-total">
          <text class="total-label">实付款</text>
          <text class="total-value">¥{{ order.order_price }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="action-group">
        <view class="primary-actions">
          <button
            v-if="
              order.order_status?.value === 10 && order.pay_status?.value === 10
            "
            class="action-btn cancel-btn"
            @click="cancelOrder"
          >
            取消订单
          </button>
          <button
            v-if="
              order.order_status?.value === 10 && order.pay_status?.value === 10
            "
            class="action-btn primary-btn"
            @click="payOrder"
          >
            立即支付
          </button>
          <button
            v-if="order.order_status?.value === 10 &&
              order.delivery_status?.value === 20
            "
            class="action-btn primary-btn"
            @click="confirmReceived"
          >
            确认收货
          </button>
          <!-- <button
            v-if="order.status === '已完成' && !order.isReviewed"
            class="action-btn review-btn"
            @click="writeReview"
          >
            评价晒单
          </button>
          <button
            v-if="order.status === '已完成'"
            class="action-btn repurchase-btn"
            @click="repurchase"
          >
            再次购买
          </button> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { orderDetailApi } from "@/api/order";
import { cancelOrderApi, cconfirmOrderApi } from "../../api/order";
export default {
  components: {
    uniIcons: () => import('@/uni_modules/uni-icons/components/uni-icons/uni-icons')
  },
  data() {
    return {
      orderId: null,
      order: {},
      logisticsInfo: {
        status: "运输中，已到达杭州转运中心",
        updateTime: "2025-03-08 15:30:45",
      },
    };
  },
  onLoad(options) {
    // 获取URL中的订单ID参数
    if (options.id) {
      this.orderId = options.id;
      this.loadOrderDetail(this.orderId);
    }
  },
  methods: {
    // 加载订单详情
    loadOrderDetail(orderId) {
      orderDetailApi({
        order_id: orderId,
      }).then((res) => {
        this.order = res.order;
      });
    },

    // 格式化时间
    formatTime(ts) {
      const date = new Date(ts);
      const y = date.getFullYear();
      const m = String(date.getMonth() + 1).padStart(2, "0");
      const d = String(date.getDate()).padStart(2, "0");
      const h = String(date.getHours()).padStart(2, "0");
      const min = String(date.getMinutes()).padStart(2, "0");
      const sec = String(date.getSeconds()).padStart(2, "0");
      return `${y}-${m}-${d} ${h}:${min}:${sec}`;
    },

    // 获取订单状态对应的CSS类名
    getStatusClass() {
      const order_status = this.order.order_status?.value; //订单状态
      switch (order_status) {
        case 20: //交易中
          return "cancelled";
        case 30:
          return "completed";
      }
      const pay_status = this.order.pay_status?.value;
      switch (pay_status) {
        case 10: //待付款
          return "pending";
      }
      const delivery_status = this.order.delivery_status?.value;
      switch (delivery_status) {
        case 20: //已发货
          return "shipped";
      }
      return "pending";
    },

    // 获取订单状态对应的图标
    getStatusIcon() {
      const statusClass = this.getStatusClass();
      switch (statusClass) {
        case 'pending':
          return 'wallet'; // 待付款图标
        case 'shipped':
          return 'paperplane'; // 物流/快递图标
        case 'completed':
          return 'checkbox-filled'; // 已完成/勾选图标
        case 'cancelled':
          return 'closeempty'; // 已取消/关闭图标
        default:
          return 'list'; // 默认订单图标
      }
    },

    // 计算商品小计
    getSubtotal() {
      return this.order.product?.reduce(
        (sum, product) =>
          sum +
          (product.grade_product_price || product.product_price) *
            product.total_num,
        0
      );
    },

    // 计算实付金额
    getTotalPayment() {
      return this.getSubtotal() + this.order.shippingFee - this.order.discount;
    },

    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 查看物流详情
    viewLogistics() {
      uni.navigateTo({
        url: `/pages/order/logistics?id=${this.order.id}&trackingNo=${this.order.trackingNo}`,
      });
    },

    // 编辑收货地址
    editAddress() {
      uni.navigateTo({
        url: `/pages/user/address?fromOrder=${this.order.id}`,
      });
    },

    // 复制订单号
    copyOrderNo() {
      uni.setClipboardData({
        data: this.order.order_no,
        success: () => {
          uni.showToast({
            title: "订单号已复制",
            icon: "success",
          });
        },
      });
    },

    // 查看商品详情
    viewProduct(productId) {
      uni.navigateTo({
        url: `/pages/shapping/detail?id=${productId}`,
      });
    },

    // 联系客服
    contactService() {
      uni.showToast({
        title: "正在接入客服...",
        icon: "none",
      });
      // 实际应用中这里应该打开客服聊天窗口
    },

    // 取消订单
    cancelOrder() {
      uni.showModal({
        title: "取消订单",
        content: "确定要取消此订单吗？",
        success: (res) => {
          if (res.confirm) {
            cancelOrderApi({
              order_id: this.orderId,
            }).then((res) => {
              this.order.order_status = { value: 20, text: "已取消" };
            });
          }
        },
      });
    },

    // 支付订单
    payOrder() {
      uni.navigateTo({
        url: `/pages/payment/payment?orderId=` + this.orderId,
      });
    },

    // 确认收货
    confirmReceived() {
      uni.showModal({
        title: "确认收货",
        content: "确认已收到商品吗？",
        success: (res) => {
          if (res.confirm) {
            cconfirmOrderApi({
              order_id: this.orderId,
            }).then((res) => {
              this.order.order_status = { value: 30, text: "已完成" };
            });
          }
        },
      });
    },

    // 评价晒单
    writeReview() {
      uni.navigateTo({
        url: `/pages/review/write?orderId=${this.order.id}`,
      });
    },

    // 再次购买
    repurchase() {
      // 将订单中的商品添加到购物车
      uni.showLoading({
        title: "正在添加到购物车...",
      });

      // 模拟添加购物车流程
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: "已添加到购物车",
          content: "商品已添加到购物车，是否立即结算？",
          confirmText: "去结算",
          cancelText: "继续购物",
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: "/pages/cart/index",
              });
            }
          },
        });
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.order-detail {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 150rpx;

  .status-section {
    padding: 40rpx 30rpx;

    &.status-bg-pending {
      background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    }

    &.status-bg-shipped {
      background: linear-gradient(135deg, #4fc3f7 0%, #2196f3 100%);
    }

    &.status-bg-completed {
      background: linear-gradient(135deg, #81c784 0%, #4caf50 100%);
    }

    &.status-bg-cancelled {
      background: linear-gradient(135deg, #bdbdbd 0%, #9e9e9e 100%);
    }

    .status-content {
      display: flex;
      align-items: center;

      .status-icon {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .status-info {
        margin-left: 20rpx;

        .status-title {
          font-size: 36rpx;
          color: #ffffff;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .status-desc {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .logistics-section,
  .delivery-section,
  .order-info-section,
  .products-section,
  .amount-section {
    margin: 20rpx 30rpx;
    background: #ffffff;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #f5f3f0;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #4a3f2b;
    }

    .edit-btn,
    .copy-btn {
      font-size: 24rpx;
      color: #978868;
    }
  }

  .section-content {
    padding: 20rpx;
  }

  .logistics-section {
    .section-content {
      display: flex;
      align-items: center;

      .logistics-icon {
        width: 60rpx;
        height: 60rpx;

        .icon-image {
          width: 100%;
          height: 100%;
        }
      }

      .logistics-info {
        flex: 1;
        margin-left: 20rpx;

        .logistics-status {
          font-size: 28rpx;
          color: #4a3f2b;
          margin-bottom: 6rpx;
        }

        .logistics-time {
          font-size: 24rpx;
          color: #978868;
        }
      }

      .right-arrow {
        width: 40rpx;
        text-align: center;
      }
    }
  }

  .delivery-section {
    .address-info {
      .contact-info {
        display: flex;
        margin-bottom: 10rpx;

        .recipient-name {
          font-size: 30rpx;
          font-weight: bold;
          color: #4a3f2b;
          margin-right: 20rpx;
        }

        .recipient-phone {
          font-size: 28rpx;
          color: #4a3f2b;
        }
      }

      .address-detail {
        font-size: 28rpx;
        color: #978868;
        line-height: 1.5;
      }
    }
  }

  .order-info-section {
    .info-item {
      display: flex;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        width: 160rpx;
        font-size: 26rpx;
        color: #978868;
      }

      .info-value {
        flex: 1;
        font-size: 26rpx;
        color: #4a3f2b;
      }
    }
  }

  .products-section {
    .product-item {
      display: flex;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .product-image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 6rpx;
        background-color: #f5f3f0;
      }

      .product-info {
        flex: 1;
        margin-left: 20rpx;

        .product-name {
          font-size: 28rpx;
          color: #4a3f2b;
          margin-bottom: 10rpx;
        }

        .product-spec {
          font-size: 24rpx;
          color: #a29171;
          margin-bottom: 30rpx;
        }

        .product-price-qty {
          display: flex;
          justify-content: space-between;

          .product-price {
            font-size: 28rpx;
            color: #e95f3b;
            font-weight: bold;
          }

          .product-qty {
            font-size: 26rpx;
            color: #978868;
          }
        }
      }
    }
  }

  .amount-section {
    .amount-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .amount-label {
        font-size: 26rpx;
        color: #978868;
      }

      .amount-value {
        font-size: 26rpx;
        color: #4a3f2b;

        &.discount {
          color: #e95f3b;
        }
      }
    }

    .amount-total {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx dashed #f5f3f0;

      .total-label {
        font-size: 28rpx;
        color: #4a3f2b;
        font-weight: bold;
      }

      .total-value {
        font-size: 32rpx;
        color: #e95f3b;
        font-weight: bold;
      }
    }
  }

  .bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    padding: 20rpx 30rpx;

    .action-group {
      display: flex;
      align-items: center;

      .contact-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 140rpx;
        background: transparent;
        padding: 0;

        .btn-icon {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 6rpx;
        }

        text {
          font-size: 24rpx;
          color: #978868;
        }
      }

      .primary-actions {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .action-btn {
          height: 80rpx;
          line-height: 80rpx;
          padding: 0 40rpx;
          font-size: 28rpx;
          border-radius: 40rpx;
          margin: 0 0 0 20rpx !important;
          //margin-left: 20rpx;

          &.cancel-btn {
            color: #978868;
            background: #f5f3f0;
            border: 1rpx solid #dcd6cc;
          }

          &.primary-btn {
            color: #ffffff;
            background: #a29171;
          }

          &.review-btn {
            color: #ffffff;
            background: #e95f3b;
          }

          &.repurchase-btn {
            color: #ffffff;
            background: #a29171;
          }
        }
      }
    }
  }
}
</style>
